<template>
  <div class="home">
    <el-container>
      <el-aside width="collapse" style="background-color: rgb(255, 255, 255)">
        <div class="left-nav">
          <!-- <button @click="isCollapse=!isCollapse">展开</button> -->
          <span class="aaa">
                        <img style="width: 20px;position: absolute;" src="../assets/logo.png"/>
                        <img v-show="!isCollapse" style="width: 180px;position: relative;margin-left: 220px;"
                             src="../assets/imgs/logo_w-02-01.png">
                      </span>
          <el-menu style="font-weight: bold"
                   class="el-menu-vertical-demo"
                   :unique-opened="true"
                   router
                   background-color="rgb(255,255,255)"
                   text-color="rgb(0,0,0)"
                   :collapse="isCollapse">
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group style="font-weight: lighter">
                <el-menu-item index="1-1">在售商品</el-menu-item>
                <el-menu-item index="1-2">发布商品</el-menu-item>
                <el-menu-item index="1-3">商品信息修改</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item-group style="font-weight: lighter">
                <el-menu-item index="2-1">待付款</el-menu-item>
                <el-menu-item index="2-2">已卖出</el-menu-item>
                <el-menu-item index="2-3">评价管理</el-menu-item>
                <el-menu-item index="2-4">售后管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-promotion"></i>
                <span>推荐管理</span>
              </template>
              <el-menu-item-group style="font-weight: lighter">
                <el-menu-item index="3-1">底部推荐栏</el-menu-item>
                <el-menu-item index="3-2">大类推荐栏</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>物流管理</span>
              </template>
              <el-menu-item-group style="font-weight: lighter">
                <el-menu-item index="4-1">寄快递</el-menu-item>
                <el-menu-item index="4-2">发货</el-menu-item>
                <el-menu-item index="4-3">包裹监控</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-comment"></i>
                <span>投诉申诉</span>
              </template>
              <el-menu-item-group style="font-weight: lighter">
                <el-menu-item index="5-1">待处理</el-menu-item>
                <el-menu-item index="5-2">已处理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>权限管理</span>
              </template>
              <el-menu-item-group style="font-weight: lighter">
                <el-menu-item index="6-1">客服权限</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header height="70px" style="background-color:rgb(255, 255, 255);padding: 0;position: relative;width: 100%">
                <span class="ddd" style="height: 70px;width:70px;margin-right: 20px; float: left">
                        <i style="font-size: 25px;" v-show="!isCollapse" class="el-icon-s-fold"
                           @click="isCollapse=true"></i>
                        <i style="font-size: 25px;" v-show="isCollapse" class="el-icon-s-unfold"
                           @click="isCollapse=false"></i>
                </span>
          <span style="float: left;margin-top: 15px;">
                    <div style="width: 300px;">
                      <el-input placeholder="请输入内容" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                      </el-input>
                    </div>
                </span>
        </el-header>
        <el-main style="background-color: #f5f1f1;">

          <router-view/>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.el-aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

.el-aside {
  background: #393e42;
  color: #333;
  height: 100vh;
}

.el-menu {
  border-right-width: 0;
}

/*Down*/
.el-main {
  color: #333;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
}

.ddd {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.el-card .el-card__body{
  position: relative;
  padding: 0;
}
.el-card is-always-shadow{
  border: 0;
}
.aaa {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ddd:hover {
  background: rgb(245, 245, 245);
}

.el-footer {
  display: flex;
  height: 4vh;
  width: 100%;
  align-items: center;
}

</style>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data: function () {
    return {
      activeIndex2: '1',
      isCollapse: false, //默认为展开，
      value: new Date(),
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    isC() {
      this.isCollapse = !this.isCollapse;
    },
  },
}
</script>
